<script setup lang="ts">
import { ref, watch, reactive, computed } from 'vue'
import ProfileFilter from './ProfileFilter.vue'
import ProfileList from './ProfileList.vue'
import Profile from '../Profile/index.vue'
import { Teamap } from '../../core/Teamap'

const Profiler = reactive(Teamap.Profiler)
let keywords = reactive({ ...Profiler.keywords })

const profiles = ref([] as Profile[])
const profileId = ref("" as string)

const profileVisible = computed(() => {
    return profileId.value.length > 0
})

const onFilterChange = (newKeywords: keywordsOf<Profile>): void => {
    keywords = newKeywords
    init()
}

const onProfilePick = (id: string): void => {
    profileId.value = id;
}

const index = computed(() => {
    return profiles.value.findIndex((profile) => {
        return profile.id == profileId.value
    })
})

const go = (step: number = 1) => {
    profileId.value = profiles.value[index.value + step].id;
}

function init() {
    Profiler.find().then(result => {
        profiles.value = result.data
        document.getElementById('splash')?.remove()
    })
}

init()
</script>
<template>
    <el-affix :offset="0">
        <ProfileFilter :keywords="keywords" @filterChange="onFilterChange" />
    </el-affix>
    <ProfileList :data="profiles" @profilePick="onProfilePick" />
    <div>
        <el-dialog
            :fullscreen="true"
            :model-value="profileVisible"
            @close="profileId = ''"
            :show-close="false"
            custom-class="fullscreen-dialog"
        >
            <div class="top-nav">
                <div class="left">
                    <el-button icon="el-icon-arrow-left" @click="profileId = ''"></el-button>
                </div>
                <div class="right">
                    <el-button icon="el-icon-arrow-up" @click="go(-1)" :disabled="index <= 0"></el-button>
                    <el-button
                        class="el-icon-arrow-down"
                        @click="go()"
                        :disabled="index >= profiles.length - 1"
                    ></el-button>
                </div>
            </div>
            <Profile :id="profileId"></Profile>
        </el-dialog>
    </div>
</template>

<style scoped>
.top-nav {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
}
.top-nav > .left {
    padding: 20px 20px;
    width: 60px;
}
.top-nav > .right {
    padding: 20px 24px;
    flex: 1;
    text-align: right;
}

.top-nav > .right .el-button {
    border: solid 1px;
    border-radius: 15%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}
.top-nav .el-button {
    background: transparent;
    border: solid 0px;
    color: white;
    font-size: 28px;
    padding: 6px;
    min-height: 0px;
}
.top-nav .el-button[disabled] {
    opacity: 0.2;
}

:deep(.el-dialog__header) {
    display: none;
}

:deep(.el-dialog__body) {
    padding: 0px;
}
</style>